<template>
  <div class="w-full h-[100vh]">
    <div class="text-[2rem] text-[var(--theme-font-color)] font-semibold relative">
      <!-- <div
        class="w-full h-[64px] absolute bottom-[1px] z-10 bg-theme s4k:h-[128px] s2k:h-[85.3px]"
      >
        <Footer></Footer>
      </div> -->
      <div v-show="downOptions"
        class="absolute top-[-55px] right-[16px] flex flex-row justify-center items-center s4k:right-[32px] s2k:right-[21.3px] s2k:top-[-73.3px] s4k:top-[-110px] z-[999]">
        <span class="text-[#9CA3AF] text-[1.13rem]">3 video selected</span>
        <div
          class="w-[132px] h-[37px] bg-[#1C64F2] flex flex-row justify-evenly items-center rounded-md ml-[16px] cursor-pointer s4k:w-[264px] s4k:h-[74px] s4k:ml-[32px] s2k:w-[176px] s2k:h-[49.3px] s2k:rounded-[8px] s2k:ml-[21.3px]">
          <svg-icon name="download" width="12px" height="12px" class="svgLogo s4ksvg s2ksvg"></svg-icon>
          <span class="text-white text-[1.13rem] font-normal" @click="downloadShow = true">Download</span>
          <svg-icon name="down" width="12px" height="12px" class="svgLogo s4ksvg s2ksvg"></svg-icon>
        </div>
      </div>
      <div v-show="downloadShow"
        class="w-[132px] h-[118px] bg-[var(--theme)] border border-solid border-[var(--grid)] text-[1.13rem] rounded-[10px] absolute right-[16px] top-[-5px] z-[100] font-normal flex flex-col justify-evenly items-start cursor-pointer py-[6px] s4k:w-[264px] s4k:h-[236px] s4k:right-[32px] s4k:top-[-10px] s4k:py-[12px] s2k:w-[176px] s2k:h-[157.3px] s2k:right-[21.3px] s2k:top-[-6.67px] s2k:py-[8px]">
        <p class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
          @click="downloadShow = false">
          webp
        </p>
        <p class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
          @click="downloadShow = false">
          mp4
        </p>
        <p class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
          @click="downloadShow = false">
          jpg
        </p>
      </div>
      <div>
        <Table ref="tableRef" @passon="accept"></Table>
      </div>
    </div>
    <div
      v-show="filterShow"
      class="absolute left-[471px] top-[125px] w-[28.958vw] h-[345px] bg-[var(--theme)] z-50 rounded-md border-solid border-[1px] border-[var(--grid)] s4k:left-[941px] s4k:top-[220px] s4k:h-[690px] s2k:left-[630px] s2k:top-[156px] s2k:h-[450px]"
    >
      <div
        class="text-[#6B7280] text-[1rem] font-SemiBold mt-[20px] pl-[16px] s4k:mt-[40px] s4k:pl-[32px] s2k:mt-[26.6px] s2k:pl-[21.3px]"
      >
        DATE RANGE
      </div>
      <div
        class="w-[calc(100%_-_32px)] m-auto flex flex-row justify-between items-center mt-[16px] mb-[4px] s4k:w-[calc(100%_-_64px)] s4k:mt-[32px] s4k:mb-[8px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[21.3px] s2k:mb-[5.3px]"
      >
        <span class="flex-[1] text-[1rem] text-[var(--theme-font-color)]"
          >Start</span
        >
        <span
          class="flex-[1] text-[1rem] text-[var(--theme-font-color)] ml-[20px] s4k:text-[24px] s4k:ml-[40px] s2k:ml-[26.6px]"
          >From</span
        >
      </div>
      <div
        class="w-[calc(100%_-_32px)] m-auto flex flex-row justify-between items-center s4k:w-[calc(100%_-_64px)] s2k:w-[calc(100%_-_42.6px)]"
      >
        <div class="flex-[1] flex flex-row justify-start items-center">
          <div
            class="startTimeDate w-[58%] relative h-[37px] s4k:w-[304px] s4k:h-[74px]"
          >
            <svg-icon
              name="date"
              width="16px"
              height="16px"
              class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"
            ></svg-icon>
            <a-date-picker
              v-model:value="FilterData.startTimeDate"
              placeholder=""
            />
          </div>
          <div
            class="w-[42%] h-[38px] relative ml-[5px] s4k:w-[202px] s4k:h-[76px] s4k:ml-[10px] s2k:ml-[13px]"
          >
            <svg-icon
              name="time"
              width="20px"
              height="20px"
              class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"
            ></svg-icon>
            <a-time-picker
              v-model:value="FilterData.startTimeHM"
              format="HH:mm"
              :allowClear="false"
              placeholder=""
            />
          </div>
        </div>
        <div
          class="flex-[1] flex flex-row justify-start items-center ml-[20px] s4k:ml-[30px]"
        >
          <div
            class="startTimeDate w-[58%] relative h-[37px] s4k:w-[304px] s4k:h-[74px]"
          >
            <svg-icon
              name="date"
              width="16px"
              height="16px"
              class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"
            ></svg-icon>
            <a-date-picker
              v-model:value="FilterData.endTimeDate"
              placeholder=""
            />
          </div>
          <div
            class="w-[42%] h-[38px] relative ml-[5px] s4k:w-[202px] s4k:h-[76px] s4k:ml-[10px] s2k:ml-[13px]"
          >
            <svg-icon
              name="time"
              width="20px"
              height="20px"
              class="svgDate s2ksvg s4ksvg absolute left-[10px] top-[50%] transform -translate-y-1/2 z-[100] s4k:left-[20px] s4k:top-[35%] s2k:top-[45%]"
            ></svg-icon>
            <a-time-picker
              v-model:value="FilterData.endTimeHM"
              format="HH:mm"
              :allowClear="false"
              placeholder=""
            />
          </div>
        </div>
      </div>
      <div
        class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[16px] s4k:w-[calc(100%_-_64px)] s4k:my-[32px] s2k:w-[calc(100%_-_42.6px)] s2k:my-[21.3px]"
      ></div>
      <div
        class="text-[#6B7280] text-[1rem] font-SemiBold pl-[16px] s4k:pl-[32px] s2k:pl-[21.3px]"
      >
        EVENT TYPE
      </div>
      <div
        id="radio"
        class="w-[calc(100%_-_32px)] m-auto flex flex-wrap justify-between mt-[10px] s4k:w-[calc(100%_-_64px)] s4k:mt-[20px] s2k:w-[calc(100%_-_42.6px)] s2k:mt-[13.3px]"
      >
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio v-model="FilterData.picked" label="All " value="1" />
          <span
            class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]"
            >(14)</span
          >
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio
            v-model="FilterData.picked"
            label="Sound Event "
            value="2"
          />
          <span
            class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]"
            >(9)</span
          >
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio
            v-model="FilterData.picked"
            label="Continuous "
            value="3"
          />
          <span
            class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]"
            >(4)</span
          >
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio
            v-model="FilterData.picked"
            label="Person Event "
            value="4"
          />
          <span
            class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]"
            >(5)</span
          >
        </div>
        <div class="w-[48%] flex flex-row justify-start items-center">
          <fwb-radio
            v-model="FilterData.picked"
            label="Motion Event "
            value="5"
          />
          <span
            class="text-[1.13rem] text-[#9CA3AF] ml-[5px] s4k:ml-[10px] s2k:ml-[6.6px]"
            >(4)</span
          >
        </div>
      </div>
      <div
        class="w-[calc(100%_-_32px)] m-auto h-[1px] bg-[var(--grid)] my-[16px] s4k:w-[calc(100%_-_64px)] s4k:my-[32px] s2k:w-[calc(100%_-_42.6px)] s2k:my-[21.3px]"
      ></div>
      <div
        class="w-[108px] h-[37px] bg-[var(--theme-search-bg)] border border-[var(--grid)] border-solid rounded-md text-center leading-[37px] text-[1.13rem] text-[var(--theme-font-color)] cursor-pointer ml-[16px] s4k:w-[216px] s4k:h-[74px] s4k:leading-[74px] s4k:text-[28px] s4k:ml-[32px] s2k:w-[144px] s2k:h-[49.3px] s2k:rounded-[8px] s2k:leading-[49.3px] s2k:ml-[21.3px]"
        @click="ApplyFilters"
      >
        Apply Filters
      </div>
      <div
        v-show="downOptions"
        class="absolute right-[16px] flex flex-row justify-center items-center s4k:right-[32px] s2k:right-[21.3px]"
      >
        <span class="text-[#9CA3AF] text-[1.13rem]">3 video selected</span>
        <div
          class="w-[132px] h-[37px] bg-[#1C64F2] flex flex-row justify-evenly items-center rounded-md ml-[16px] cursor-pointer s4k:w-[264px] s4k:h-[74px] s4k:ml-[32px] s2k:w-[176px] s2k:h-[49.3px] s2k:rounded-[8px] s2k:ml-[21.3px]"
        >
          <svg-icon
            name="download"
            width="12px"
            height="12px"
            class="svgLogo s4ksvg s2ksvg"
          ></svg-icon>
          <span
            class="text-white text-[1.13rem] font-normal"
            @click="downloadShow = true"
            >Download</span
          >
          <svg-icon
            name="down"
            width="12px"
            height="12px"
            class="svgLogo s4ksvg s2ksvg"
          ></svg-icon>
        </div>
      </div>
      <div
        v-show="downloadShow"
        class="w-[132px] h-[118px] bg-[var(--theme)] border border-solid border-[var(--grid)] text-[1.13rem] rounded-[10px] absolute right-[16px] top-[125px] z-[100] font-normal flex flex-col justify-evenly items-start cursor-pointer py-[6px] s4k:w-[264px] s4k:h-[236px] s4k:right-[32px] s4k:top-[220px] s4k:py-[12px] s2k:w-[176px] s2k:h-[157.3px] s2k:right-[21.3px] s2k:top-[160px] s2k:py-[8px]"
      >
        <p
          class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
          @click="downloadShow = false"
        >
          webp
        </p>
        <p
          class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
          @click="downloadShow = false"
        >
          mp4
        </p>
        <p
          class="flex-[1] w-[calc(100%_-_15px)] pl-[15px] hover:bg-[var(--theme-hover)] flex flex-col justify-center s4k:w-[calc(100%_-_30px)] s4k:pl-[30px] s2k:w-[calc(100%_-_20px)] s2k:pl-[20px]"
          @click="downloadShow = false"
        >
          jpg
        </p>
      </div>
    </div>
    <div class="mask" v-show="maskShow" @click="back"></div>
  </div>
</template>

<script setup name="Normal">
import moment from "moment";
import Footer from "./footer.vue";
import Table from "./table.vue";
import { onMounted, reactive, ref, watch } from "vue";
import { FwbInput, FwbRadio } from "flowbite-vue";
import settingStore from '@/store/modules/setting'
const store = settingStore()

const searchCamera = ref("");
const filterShow = ref(false);
const maskShow = ref(false); // 遮罩层
const back = () => {
  filterShow.value = false;
  maskShow.value = false;
};
const ApplyFilters = () => {
  console.log("FilterData", FilterData);
  back();
};
const show = () => {
  filterShow.value = true;
  maskShow.value = true;
};
const downOptions = ref(store.downOptions);
const downloadShow = ref(false); // 下载
const FilterData = reactive({
  startTimeDate: "", // moment('2024/01/01', 'YYYY/MM/DD')
  startTimeHM: "", // moment('00:00', 'HH:mm')
  endTimeDate: "", // moment('2024/02/01', 'YYYY/MM/DD')
  endTimeHM: "", // moment('00:00', 'HH:mm')
  picked: "first",
});
const accept = (param) => {
  if (param.length > 0) {
    downOptions.value = true;
    store.setDownOptions(true)
  } else {
    downOptions.value = false;
    store.setDownOptions(false)
  }
};
</script>

<style scoped lang="scss">
#searchCamera {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 1.13rem;
    font-family: Medium;
    color: #ffffff;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

.svgRotate {
  transition: all 0.2s;
  transform: rotate(180deg);
}

.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#input {
  color: #ffffff;
  font-size: 1.13rem;
  border-radius: 10px;
  border: solid 1px #4b5563;

  &:focus {
    outline: none;
    box-shadow: inset 0 0;
    border: solid 1px #4b5563;
  }
}

#radio {
  :deep(label) {
    width: auto;

    input {
      border: solid 1px var(--grid);
      background-color: var(--inputBg);
      cursor: pointer;
      height: 16px;
      width: 16px;

      &:checked {
        border: solid 4px #1c64f2;
        background-color: var(--theme-font-color);
        // border-color: #111928;
      }

      &:focus {
        box-shadow: inset 0 0;
      }
    }

    .text-sm {
      color: var(--theme-font-color);
      font-size: 1.13rem;
      font-family: Medium;
    }
  }
}

.ant-picker {
  width: 100%;
  height: 37px;
  background-color: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 10px;

  :deep(input) {
    padding-left: 25px;
    color: var(--theme-font-color) !important;
  }

  :deep(svg) {
    display: none;
  }
}

.startTimeDate {
  .ant-picker {
    width: 100%;
    height: 37px;
    background-color: var(--theme);
    border: solid 1px var(--grid);
    border-radius: 10px;

    :deep(input) {
      padding-left: 25px;
      color: var(--theme-font-color) !important;
    }

    :deep(svg) {
      display: none;
    }
  }
}

@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.2);
  }

  #searchCamera {
    :deep(input) {
      height: 48px;
      padding-left: 40px;
    }
  }

  #radio {
    :deep(label) {
      input {
        width: 21.3px;
        height: 21.3px;

        &:checked {
          border: solid 5.3px #1c64f2;
        }
      }
    }
  }

  .ant-picker {
    height: 49.3px;
    padding-left: 30px;
  }

  .startTimeDate {
    .ant-picker {
      width: 202px;
      height: 49.3px;
    }
  }
}

@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(1.8) !important;
  }

  #searchCamera {
    :deep(input) {
      height: 72px;
      padding-left: 100px;
    }
  }

  #input {
    font-size: 28px;
  }

  #radio {
    :deep(label) {
      input {
        width: 32px;
        height: 32px;

        &:checked {
          border: solid 8px #1c64f2;
        }
      }

      .text-sm {
        font-size: 28px;
      }
    }
  }

  .ant-picker {
    width: 202px;
    height: 74px;
    padding-left: 30px;

    :deep(input) {
      font-size: 22px;
    }
  }

  .startTimeDate {
    .ant-picker {
      width: 304px;
      height: 74px;
    }
  }
}
</style>
<style lang="scss">
.datepicker-picker {
  background-color: var(--theme-ant-picker);

  button {
    background-color: var(--theme-ant-picker) !important;
    color: var(--theme-font-color);

    &:hover {
      background-color: var(--theme);
    }

    svg {
      color: var(--theme-font-color);
    }
  }

  span {
    color: var(--theme-font-color);

    &:hover {
      background-color: var(--theme-ant-picker);
    }
  }

  .dow {
    color: #929aa5;

    &:hover {
      background-color: #364251;
    }
  }
}

.ant-picker-dropdown {
  background-color: var(--theme-ant-picker);
  border-radius: 10px;

  .ant-picker-panel-container {
    background-color: var(--theme-ant-picker);

    .ant-picker-time-panel-cell-inner {
      color: var(--theme-font-color) !important;
    }
  }

  button {
    color: var(--theme-font-color) !important;
    border: solid #1677ff 1px !important;
    background-color: #1677ff !important;
  }
}

.ant-picker-dropdown
  .ant-picker-time-panel-column
  > li.ant-picker-time-panel-cell-selected
  .ant-picker-time-panel-cell-inner {
  background-color: var(--theme) !important;
}

.ant-picker-cell-inner {
  color: var(--theme-font-color) !important;
}

.ant-picker-dropdown
  .ant-picker-cell-in-view.ant-picker-cell-today
  .ant-picker-cell-inner {
  background-color: #1a56db;

  &::before {
    border: solid #1a56db 1px;
  }

  &:hover {
    background-color: #1a56db !important;
  }
}

.ant-picker-header {
  button {
    background-color: var(--theme-ant-picker) !important;
    border: solid 1px var(--theme-ant-picker) !important;
  }
}

.ant-picker-content th {
  color: #929aa5 !important;
}
</style>
